<template>
    <div class="container">
        <!--系统实时消息统计-->
        <el-row :gutter="10">
            <el-col :span="8">
                <el-row>
                    <el-col :span="24">
                        <el-card shadow="never" :body-style="{ padding: '0px' }">
                            <img src="@/assets/images/advertisement.png" class="home-header-image" alt="宣传">
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-row :gutter="3">
                            <!--系统用户统计-->
                            <user-count></user-count>
                            <!--在线用户统计-->
                            <online-count></online-count>
                        </el-row>
                        <el-row :gutter="3">
                            <!--消息数量统计-->
                            <msg-count></msg-count>
                            <!--流程数量统计-->
                            <flow-count></flow-count>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="16">
                <el-row>
                    <el-col :span="24">
                        <el-card shadow="never">
                            <div slot="header" class="clearfix">
                                <el-row>
                                    <el-col :span="20">
                                        <div class="ub cross-center">
                                            <span class="ub">
                                                <img src="@/assets/images/syslogo_blue.png" alt="图标"/>
                                            </span>
                                            <span class="ub welcome-item-title">
                                                Hello! 欢迎使用CRMEB SAAS平台
                                            </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-button @click="contactFun" class="welcome-item-button" type="text">联系我们</el-button>
                                        <contact-dialog :contactDialogVisible="isShowContactDialog" @close="closeDialog"></contact-dialog>
                                    </el-col>
                                </el-row>
                            </div>
                            <div>
                                <el-row :gutter="30">
                                    <el-col :span="6">
                                        <div class="flow-app-item">
                                            <div class="flow-app-item-icon"><i class="el-icon-s-custom"></i></div>
                                            <span class="flow-app-item-title">
                                                <el-badge is-dot class="item">发起流程</el-badge>
                                            </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="flow-app-item">
                                            <div class="flow-app-item-icon"><i class="el-icon-message-solid"></i></div>
                                            <span class="flow-app-item-title">
                                                <el-badge is-dot class="item">与我相关</el-badge>
                                            </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="flow-app-item">
                                            <div class="flow-app-item-icon"><i class="el-icon-s-check"></i></div>
                                            <span class="flow-app-item-title">
                                                <el-badge is-dot class="item">待我审核</el-badge>
                                            </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="flow-app-item">
                                            <div class="flow-app-item-icon"><i class="el-icon-s-order"></i></div>
                                            <span class="flow-app-item-title">
                                                <el-badge is-dot class="item">历史审批</el-badge>
                                            </span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-card shadow="never">
                        <!--系统统计图表-->
                       <user-static-bar></user-static-bar>
                    </el-card>
                </el-row>
            </el-col>
        </el-row>
        <!--系统实时消息统计-->
        <el-row :gutter="10">
            <el-col :span="24">
                <el-card shadow="never">
                    <!--首页消息公告-->
                    <div class="grid-content bg-purple">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="系统推荐" name="first">
                                微信交流群： 13172493933
                            </el-tab-pane>
                            <el-tab-pane label="更新通知" name="second">
                                开发中......
                            </el-tab-pane>
                            <el-tab-pane label="发布版本" name="third">
                                开发中......
                            </el-tab-pane>
                            <el-tab-pane label="定时任务消息" name="fourth">
                                开发中......
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import ContactDialog from "@/components/dialog/ContactDialog";
import OnlineCount from "@/components/message/OnlineCount";
import UserCount from "@/components/message/UserCount";
import MsgCount from "@/components/message/MsgCount";
import FlowCount from "@/components/message/FlowCount";
import UserStaticBar from "@/components/static/UserStaticBar";
export default {
    components: {UserStaticBar, FlowCount, MsgCount, UserCount, OnlineCount,ContactDialog},
    data() {
        return {
            chart: null,
            activeName: 'first',
            isShowContactDialog: false
        };
    },
    methods: {
        // 联系我们
        contactFun() {
            this.isShowContactDialog = true
        },
        closeDialog() {
            this.isShowContactDialog = false
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
};
</script>

<style lang="less" scoped>
    .flow-app-item {
        height: 100%;
        cursor: pointer;
        border-radius: 10px;
        text-align: center;
        padding: 8px 0;
    }
    .flow-app-item-icon {
        font-size: 32px;
        margin-bottom: 4px;
        color: #1a53ff;
    }
    .flow-app-item-title {
        font-size: 14px;
    }
    .home-header-image {
        width: 100%;
        display: block;
        height: 195.38px;
        border-radius: 4px;
    }
    .welcome-item-title {
        margin-left: 10px
    }
    .welcome-item-button {
        float: right;
        padding: 3px 0;
        color: #2f54eb
    }
</style>
